<template>
	<div>
		<div style="padding: 10px;border-radius: 8px;background: #fff;margin-bottom: 10px;" class="displayFlexBet">

			<div class="date-item displayFlex" style="flex: 1;">
				<el-select v-model="params.outletId" filterable placeholder="选择排口" @change="countWarningData"
					:clearable="true">
					<el-option v-for="item in outletList" :key="item.outletId" :label="item.outletName"
						:value="item.outletId">
					</el-option>
				</el-select>

				<!-- <i class="el-icon-arrow-down" style="margin-bottom: 6px;color: #999;"></i> -->
			</div>

			<div class="displayFlex" style="flex: 1;">
				<span style="margin-right: 10px;color: #999;">时间：</span>
				<el-date-picker v-model="params.monthDate" placeholder="时间" format="yyyy-MM" value-format="yyyy-MM"
					type="month" size="small" style="width: 140px;" @change="countWarningData" :clearable="false">
				</el-date-picker>
			</div>


			<div class="displayFlex" style="flex: 1;">
				<div class="date-item displayFlex mr10">
					<el-select v-model="params.dataType" filterable placeholder="数据类型" @change="countWarningData"
						:clearable="true">
						<el-option key="HOUR" label="小时数据" value="HOUR" />
						<el-option key="DAY" label="日数据" value="DAY" />
					</el-select>

					<!-- <i class="el-icon-arrow-down" style="margin-bottom: 6px;color: #999;"></i> -->
				</div>

				<div class="date-item displayFlex mr10">
					<el-select v-model="params.outletApproach" filterable placeholder="排口类型" @change="countWarningData"
						:clearable="true">
						<el-option key="ORGANIZED_OUTLET" label="有组织排放" value="ORGANIZED_OUTLET" />
						<el-option key="DISORGANIZED_OUTLET" label="无组织排放" value="DISORGANIZED_OUTLET" />
					</el-select>

					<!-- <i class="el-icon-arrow-down" style="margin-bottom: 6px;color: #999;"></i> -->
				</div>

				<div class="date-item displayFlex">
					<el-select v-model="params.monitorType" filterable placeholder="设备类型" @change="countWarningData"
						:clearable="true">
						<el-option key="CEMS" label="CEMS" value="CEMS" />
						<el-option key="AIR_SITE" label="空气微站" value="AIR_SITE" />
						<el-option key="TSP" label="TSP" value="TSP" />
					</el-select>
					<!-- <i class="el-icon-arrow-down" style="margin-bottom: 6px;color: #999;"></i> -->
				</div>
			</div>
		</div>

		<div style="display: flex;justify-content: space-between;" v-loading="loading">
			<div style="flex: 3;padding: 45px 35px 15px;" class="bgfff bra8 color555 mr20">
				<div v-for="(item,index) in dataList1" :key="index" class="displayFlexBet mb20 font15 point"
					style="padding-bottom: 20px;border-bottom: 1px solid#F8F7F9;" @click="getGasPollutionHourList(item)">
					<div>{{item.outletName}}</div>
					<div>{{item.outletApproachStr}}</div>
					<div>{{item.dateStr}}</div>
					<div style="color: #D10633;font-weight: 400;">
						{{item.pollutionName}}
						<span class="ml5">{{item.monitorValue}}{{item.unitCode}}</span>
					</div>
				</div>
				<el-empty v-if="dataList1.length == 0" />
			</div>
			<div style="flex: 2;">
				<div style="background: #FDF8F8;">
					<div style="padding: 20px 30px;">
						<div class="font16 color555">异常分析</div>

						<div class="font15 mt20">
							<span class="color888 mr10">{{params.monthDate.substring(0,7)}}</span>
							<span class="color555">{{dataList2.month.totalNum}}次小时段异常</span>
						</div>

						<div class="displayFlexBet mt20">
							<div style="width: 50%;height: 88px;" id="chart1"></div>
							<div style="width: 50%;height: 88px;" id="chart2"></div>
						</div>

						<div class="font15 mt20">
							<span class="color888 mr10">{{params.monthDate.substring(0,4)}}年度</span>
							<span class="color555">{{dataList2.year.totalNum}}次小时段异常</span>
						</div>

						<div class="displayFlexBet mt20">
							<div style="width: 50%;height: 88px;" id="chart3"></div>
							<div style="width: 50%;height: 88px;" id="chart4"></div>
						</div>

						<div style="margin-top: 50px;">
							<div class="color888 font15 mb5">
								<span :class="[timeType == 'one'?'selected':'']" class="point"
									@click="timeType = 'one',formLineChart()">时段数据</span>
								<span class="ml20 mr20" style="color: #EDECF1;">|</span>
								<span :class="[timeType == 'two'?'selected':'']" class="point"
									@click="timeType = 'two',formLineChart()">日数据</span>
							</div>
						</div>
						<div id="chart5" style="width: 100%;height: 200px;"></div>
					</div>

					<div style="background: #3F44C9;padding: 20px 30px;">
						<div style="color: #9FA2E4;" class="font16 mb20">异常点位分析</div>
						<div>
							<div v-for="(item,index) in dataList4" :key="index" class="font15">
								<div class="colorfff mb10">
									<span>{{index+1}}.</span>
									<span>{{item.outletName}}</span>
									<span>({{item.monitorTypeStr}})</span>
								</div>
								<div class="displayFlex">
									<div style="background: #9FA2E4;height: 10px;" :style="{'width':item.percent*100+'%'}"></div>
									<div class="colorfff ml10" style="width: 30px;">{{item.num}}次</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<el-dialog :visible.sync="show1" append-to-body :title="selectData.outletName">
			<div>
				<div class="font13 u-m-b-20 color888">{{selectData.pollutionName}}</div>
				<div id="chart22" style="width: 100%;height: 300px;"></div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import moment from 'moment'
	import * as echarts from 'echarts';

	let that
	export default {
		data() {
			return {
				params: {
					outletId: '',
					dataType: '',
					outletApproach: '',
					monitorType: '',
					monthDate: moment().format('YYYY-MM'),
				},
				loading: false,
				show1: false,
				outletList: [],
				dataList1: [],
				dataList2: {
					month: {},
					year: {}
				},
				dataList3: {},
				dataList4: [],
				timeType: "one",
				selectData: {}
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.getOutletBaseList()
			that.countWarningData()
		},

		methods: {

			getGasPollutionHourList(selectData) {
				that.show1 = true
				that.selectData = selectData
				//console.log(selectData)
				that.ajax({
					url: 'gasOutlet/getGasPollutionHourList',
					contentType: 'application/json',
					data: JSON.stringify({
						outletId: selectData.outletId,
						divisorCode: selectData.divisorCode,
						startTime: moment(selectData.endTime).subtract(1, "days").format("YYYY-MM-DD hh:mm:ss"),
						endTime: selectData.endTime,
					}),
					success: function(result) {
						that.chartData2 = result.data
						let xAxisData = []
						let seriesData = []
						for (let item of result.data) {
							xAxisData.push(item.createTime.split(" ")[1])
							seriesData.push(item.amount)
						}
						that.formcategory("chart22", xAxisData, seriesData, selectData)
					},
				})
			},

			formcategory(charyId, xAxisData, seriesData, selectData) {
				//console.log(selectData.hourLimitConcentration,selectData.dayLimitConcentration)
				var chartDom = document.getElementById(charyId);
				var myChart = echarts.init(chartDom);
				var option;

				selectData.maxWarningHourLimit = selectData.maxWarningHourLimit || 0
				selectData.hourLimitConcentration = selectData.hourLimitConcentration || 0
				option = {
					grid: {
						top: "12%",
						bottom: "10%",
						left: "5%",
						right: "10%"
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xAxisData,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: ["#FAFBFC"],
							},
						},
						axisLabel: {
							//y轴文字的配置
							textStyle: {
								color: "rgba(215, 215, 215, 1)",
							},
							// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					series: [{
						data: seriesData,
						type: 'line',

						markLine: {
							label: {
								show: true,
								formatter: function(params) {
									return params.name + "：" + params.value
								}
							},
							data: [{
								name: '预警值',
								//yAxis:100
								yAxis: selectData.maxWarningHourLimit
							}, {
								name: '限值',
								yAxis: selectData.hourLimitConcentration
								//yAxis: 120
							}]
						},
						label: {
							show: true,
							position: 'top',
						}
					}],
					visualMap: [{
						show: false,
						pieces: [{
								lt: selectData.maxWarningHourLimit,
								color: '#78A355',
							},
							{
								gte: selectData.maxWarningHourLimit,
								lte: selectData.hourLimitConcentration,
								color: "yellow",
							},
							{
								gt: selectData.hourLimitConcentration,
								color: "red",
							},
						],
					}],
				};

				option && myChart.setOption(option);
			},

			countWarningData() {
				that.loading = true
				let thisParams = JSON.parse(JSON.stringify(that.params))
				thisParams.monthDate = thisParams.monthDate + "-01"
				that.ajax({
					url: '/gasOutlet/warning/countWarningDataByMonitor',
					data: JSON.stringify(thisParams),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							let total = 0
							for (let item of result.data) {
								total += item.num
							}
							for (let item of result.data) {
								item.percent = item.num / total
							}
							that.dataList4 = result.data
						}
					},
				})
				that.ajax({
					url: '/gasOutlet/warning/getMonthExceedDataList',
					data: JSON.stringify(thisParams),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList1 = result.data
							that.loading = false
						}
					},
				})

				that.ajax({
					url: '/gasOutlet/warning/getQualifiedCharts',
					data: JSON.stringify(thisParams),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList3 = result.data
							that.formLineChart()
						}
					},
				})

				that.ajax({
					url: '/gasOutlet/warning/countWarningData',
					data: JSON.stringify(thisParams),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList2 = result.data
							let chartData1 = []
							let chartData2 = []
							let chartData3 = []
							let chartData4 = []
							for (let item of result.data.month.approachTypes) {
								let item1 = {
									name: item.typeStr,
									value: item.num
								}
								chartData1.push(item1)
							}
							for (let item of result.data.month.monitorTypes) {
								let item1 = {
									name: item.typeStr,
									value: item.num
								}
								chartData2.push(item1)
							}
							for (let item of result.data.year.approachTypes) {
								let item1 = {
									name: item.typeStr,
									value: item.num
								}
								chartData3.push(item1)
							}
							for (let item of result.data.year.monitorTypes) {
								let item1 = {
									name: item.typeStr,
									value: item.num
								}
								chartData4.push(item1)
							}
							that.formPieChart("chart1", chartData1)
							that.formPieChart("chart2", chartData2)
							that.formPieChart("chart3", chartData3)
							that.formPieChart("chart4", chartData4)
						}
					},
				})
			},


			getOutletBaseList() {
				that.ajax({
					url: '/onlineMonitor/getGasOutletList',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.outletList = result.data

						}
					},
				})
			},

			formLineChart() {
				let dataList1 = []
				let dataList2 = []
				var chartDom = document.getElementById('chart5');
				var myChart = echarts.init(chartDom);
				var option;

				if (that.timeType == 'one') {
					for (let item of that.dataList3.hourCharts) {
						dataList1.push(item.monthStr)
						dataList2.push(item.percent)
					}
				}
				if (that.timeType == 'two') {
					for (let item of that.dataList3.dayCharts) {
						dataList1.push(item.monthStr)
						dataList2.push(item.percent)
					}
				}

				option = {
					backgroundColor: "#fff",
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: dataList1,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					grid: {
						top: "20px",
						bottom: "20px",
						left: "10px"
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: ["#FAFBFC"],
							},
						},
						axisLabel: {
							show: false,
							//y轴文字的配置
							textStyle: {
								color: "rgba(215, 215, 215, 1)",
							},
							// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					series: [{
						data: dataList2,
						type: 'line',
						//symbol: 'none',
						"label": {
							"normal": {
								"fontSize": 15,
								"show": true,
								"position": "top",
								"color": "#888",
							}
						},
						"itemStyle": {
							"normal": {
								"color": "#888",
								"lineStyle": {
									"color": "#5555ff"
								}
							}
						},
						"symbolSize": 0,
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#BCEDFF' // 渐变起始颜色
							}, {
								offset: 1,
								color: '#FFFFFF' // 渐变结束颜色
							}])
						},
					}]
				};

				option && myChart.setOption(option);
			},

			formPieChart(chartId, chartData) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option = {
					tooltip: {
						trigger: 'item'
					},
					grid: {
						top: 0,
						right: 0,
						bottom: 10,
						left: 0,
					},
					legend: {
						orient: 'vertical',
						itemHeight: 8,
						right: 0,
						top: 0,
						bottom: 0,
						icon: 'circle',
						formatter: function(name) { // 添加
							let total = 0
							let target
							for (let i = 0; i < chartData.length; i++) {
								total += chartData[i].value
								if (chartData[i].name === name) {
									target = chartData[i].value
								}
							}
							var arr = [
								'{a|' + name + '}' + '{c|' + target + '}'
							]
							return arr.join('  ')
						},
						textStyle: { // 添加
							padding: [0, 0, 0, 0],
							rich: {
								a: {
									color: '#888',
									fontSize: 14,
									width: 100
								},
								c: {
									fontSize: 16,
									color: '#333',
									lineHeight: 30
								}
							}
						}
					},
					series: [{
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						center: ['30%', '50%'],
						data: chartData,
						label: {
							show: false,
							position: 'center'
						},
						labelLine: {
							show: false
						},
						itemStyle: {
							normal: {
								color: function(colors) {
									var colorList = [
										'#3A3EF4',
										'#F04859',
										'#91cd77',
										'#0078E8',
										'#21D189',
										'#FFBA46'
									];
									return colorList[colors.dataIndex];
								}
							},
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				option && myChart.setOption(option);
			},


		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}

	.selected {
		color: #3A3EF4 !important;
	}
</style>